/**
 * Created by 游永年 on 2019-01-10 22:57.
 * 底部导行栏$
 */
'use strict';
import {TabBar} from 'antd-mobile';
import {connect} from 'dva';
import React, {Component} from 'react';
import {withRouter} from 'react-router';

import CacheRoute, {CacheSwitch} from 'react-router-cache-route';
import Book from "../routes/Book/Book";
import IndexPage from "../routes/IndexPage/IndexPage";
import Study from "../routes/Study/Study";
import User from "../routes/User/User";
import styles from './Main.less';

//route4.0以后不支持子路由嵌套,要写入相应子组件中
const renderContent = () => {
  return <CacheSwitch>
    <CacheRoute path="/home/*" component={IndexPage} extra/>
    <CacheRoute path="/study" component={Study}/>
    <CacheRoute path="/book" component={Book}/>
    <CacheRoute path="/user/*" component={User} extra/>
  </CacheSwitch>;
}

@withRouter
class Main extends Component {
  render() {
    const {history, isFirstTest = false} = this.props;
    const {push, location: {pathname}} = history;
    const height = window.innerHeight;
    return (
      <div style={{
        position: 'fixed',
        height: `${height}px`,
        width: '100%',
        top: 0,
      }}
      >
        <div style={{
          height: `${height - 50}px`,
          width: '100%',
          overflowY: 'scroll',
        }}>
          {renderContent()}
        </div>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#01bcf9"
          barTintColor="white"
          prerenderingSiblingsNumber={0}
        >
          <TabBar.Item
            title="主页"
            key="home"
            icon={<div className={styles.home}/>}
            selectedIcon={<div className={styles.home_selected}/>}
            selected={pathname.startsWith('/home')}
            onPress={() => push('/home/list')}
          >
          </TabBar.Item>
          <TabBar.Item
            icon={<div className={styles.book}/>}
            selectedIcon={<div className={styles.book_selected}/>}
            title="预定"
            key="book"
            selected={pathname.startsWith('/book')}
            onPress={() => {
              //无经过首次测试,到测试欢迎页面
              if (isFirstTest) {
                push('/book/bookClass');
              } else {
                push('/book/firstTest/welcome');
              }
              // this.props.dispatch({type: 'book/clear'});
            }}
          >
          </TabBar.Item>
          <TabBar.Item
            icon={<div className={styles.study}/>}
            selectedIcon={<div className={styles.study_selected}/>}
            title="学习"
            key="study"
            selected={pathname.startsWith('/study')}
            onPress={() => push('/study')}
          >
          </TabBar.Item>
          <TabBar.Item
            icon={<div className={styles.user}/>}
            selectedIcon={<div className={styles.user_selected}/>}
            title="我的"
            key="user"
            selected={pathname.startsWith('/user')}
            onPress={() => push('/user/me')}
          >
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
};

Main.propTypes = {};
const opts = ({user}) => {
  const {isFirstTest} = user || {};
  return {isFirstTest};
}

export default connect(opts)(Main);
